<template>
  <div class="content-wrapper">
    <el-row type="flex" :gutter="0" style="padding-left: 1vw">
      <el-col :span="2">
        <h2 class="subtitle" style="margin-top: 3vh; margin-left: 1vw">操作日志</h2>
      </el-col>
      <el-col :span="22">
        <el-form :inline="true" class="demo-form-inline" style="margin: 2vh 0 0 2vw;">
          <el-form-item style="margin-left: 20px">
            <div slot="label">
              操作模块：
            </div>
            <el-select v-model="module" placeholder="请选择"  @change="changeModule">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围：">
            <div class="block">
              <el-date-picker
                style="width: 18vw"
                v-model="range"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-button class="el-blue-button" @click="getlogs"><i class="el-icon-search"></i> &nbsp;查询</el-button>
          <el-button class="el-blue-button" @click="reset"><i class="el-icon-refresh-right"></i>&nbsp;重置</el-button>
        </el-form>
      </el-col>
    </el-row>
    <hr style="border-bottom: none;border-color: #8c939d"/>
    <el-row style="margin: 0 5vw" v-show="module==='公告栏'||module==='用户管理'">
      <el-table
        :data="BB_logs"
        style="width: 100%">
        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="position" label="职位" width="100" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="100"></el-table-column>
        <el-table-column prop="username" label="用户名"  align="center" width="100"></el-table-column>
        <el-table-column prop="module" label="操作模块" align="center" width="150"></el-table-column>
        <el-table-column prop="operation" label="操作动作"  align="center"></el-table-column>
        <el-table-column prop="operation_status" label="操作状态"  align="center"></el-table-column>
        <el-table-column prop="time" label="操作时间"  align="center"></el-table-column>
        <el-table-column prop="ip" label="操作IP"  align="center"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px;float: right"
        :page-size="this.pageSize"
        @current-change="handleBBCurrentChange"
        layout="total, prev, pager, next, jumper"
        :current-page.sync="BB_currentPage"
        :total="BB_total">
      </el-pagination>
    </el-row>
    <el-row style="margin: 0 5vw" v-show="module==='生产运行管理'">
      <el-table
        :data="POM_logs"
        style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="position" label="职位" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="200"></el-table-column>
        <el-table-column prop="username" label="用户名"  align="center" width="150"></el-table-column>
        <el-table-column prop="cmpTag" label="数据项" align="center" width="380"></el-table-column>
        <el-table-column prop="date" label="数据日期" align="center" width="150"></el-table-column>
        <el-table-column prop="newvalue" label="新值/kWh"  align="center"></el-table-column>
        <el-table-column prop="oldvalue" label="旧值/kWh"  align="center"></el-table-column>
<!--        <el-table-column prop="operation_status" label="操作状态"  align="center"></el-table-column>-->
        <el-table-column prop="time" label="操作时间"  align="center" width="250"></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px;float: right"
        :page-size="this.pageSize"
        @current-change="handlePOMCurrentChange"
        layout="total, prev, pager, next, jumper"
        :current-page.sync="POM_currentPage"
        :total="POM_total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import request from '@/network/request'
export default {
  name: 'index',
  data () {
    return {
      range: ['', ''],
      options: [{
        value: '生产运行管理',
        label: '生产运行管理'
      }, {
        value: '公告栏',
        label: '公告栏'
      }, {
        value: '用户管理',
        label: '用户管理'
      }],
      module: '生产运行管理',
      BB_logs: [{
        id: 17,
        time: '2020-12-22 04:14:09',
        position: '临时工',
        name: '马旭卿',
        username: 'mxq',
        module: null,
        operation: "删除用户'阿斯蒂芬是我s '",
        operation_status: '待确认',
        ip: '0:0:0:0:0:0:0:1'
      }],
      POM_logs: [],
      BB_total: 0,
      POM_total: 0,
      BB_currentPage: 1,
      POM_currentPage: 1,
      pageSize: Math.floor((window.innerHeight - 190) / 70)
    }
  },
  created () {
    this.getlogs()
  },
  methods: {
    getlogs () {
      if (this.module === '公告栏' || this.module === '用户管理') {
        this.requestBBLogList(this.range[0], this.range[1])
      } else {
        this.requestPOMLogList(this.range[0], this.range[1])
      }
    },
    reset () {
      this.range = ['', '']
      this.BB_currentPage = 1
      this.POM_currentPage = 1
      this.requestBBLogList(this.range[0], this.range[1])
      this.requestPOMLogList(this.range[0], this.range[1])
    },
    changeModule (value) {
      this.range = ['', '']
      this.getlogs()
    },
    requestBBLogList (startTime, endTime) {
      if (startTime === '') {
        startTime = '1970-01-01'
        endTime = '2100-12-31'
      }
      console.log(this.range)
      request({
        method: 'post',
        url: `/log/showlog?module=${this.module}&pagesize=${this.pageSize}&pagenum=${this.BB_currentPage}&starttime=${startTime}&endtime=${endTime}`
      }).then((res) => {
        // console.log(res.data)
        this.BB_logs = res.data.data.result
        this.BB_total = res.data.data.totalrecords
      })
    },
    requestPOMLogList (startTime, endTime) {
      if (startTime === '') {
        startTime = '1970-01-01'
        endTime = '2100-12-31'
      }
      console.log(this.range)
      request({
        method: 'post',
        url: `/log/showMongolog?pagesize=${this.pageSize}&pagenum=${this.POM_currentPage}&starttime=${startTime}&endtime=${endTime}`
      }).then((res) => {
        console.log(res.data)
        this.POM_logs = res.data.data.data
        this.POM_total = res.data.data.total
      })
    },
    handleBBCurrentChange (val) {
      this.BB_currentPage = val
      this.requestBBLogList(this.range[0], this.range[1])
    },
    handlePOMCurrentChange (val) {
      this.POM_currentPage = val
      this.requestPOMLogList(this.range[0], this.range[1])
    }
  }
}
</script>

<style scoped>
  .demo-form-inline {
    padding-top: 0.8vh;
  }
  .el-table{
    font-size: 20px;
  }
  >>>td .cell {
    /*margin-top: 3vh;*/
    margin: 1.8% 0;
  }
  .pagination {
    padding-top: 2vh;
    text-align: center;
  }
  >>>.el-pagination__total, >>>.el-pagination__jump{
    color: white;
  }
  >>> .el-pagination span {
    font-size: 18px;
  }
  >>>.number{
    color: #dddddd;
  }
</style>
